<template>
  <div>
    <div class="table-data" v-show="tabShow">
      <div class="search-box">
        <!-- <el-input size="small" v-model="title" placeholder="商品名称"></el-input>
        <el-button size="small" type="primary" @click="handleSearch">搜索</el-button>
        <el-button size="small" type="primary" @click="alltableData">全部商品</el-button> -->
        <el-button size="small"  @click="handleAdd()"><i class="el-icon-plus"></i><span>添加</span></el-button>
      </div>
      <el-table 
      v-loading="loading"
      element-loading-text="正在加载"
      element-loading-spinner="el-icon-loading" :data="tableData" style="width:100%" :height="tHeight" class="table-box">
        <el-table-column label="id" width="80" prop="id"></el-table-column>
        <el-table-column label="标题" prop="title"></el-table-column>
        <el-table-column label="图片" width="300">
          <template slot-scope="scope">
            <img :src="scope.row.log_img" alt="" srcset="" class="img">
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status_str" width="300"></el-table-column>
        <el-table-column label="添加时间" prop="createtime" width="300"></el-table-column>
        <el-table-column label="操作" prop="createtime" width="240">
          <template slot-scope="scope">
            <button @click="StatusModification(scope.row.id,1)" v-if="scope.row.status==2" class="butt">发布</button>
            <button @click="StatusModification(scope.row.id,2)" v-if="scope.row.status==1" class="butt">不发布</button>
            -
            <button @click="DeleteOperation(scope.row.id)" class="butt-min danger">删除</button>
            -
            <router-link :to="{name:'articleDetails',query:{id:scope.row.id}}" @click.native="handleDetail()" class="link">编辑</router-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages" ref="page-box">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10,30,50]"
        :page-size="size"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
      ></el-pagination>
      </div>
    </div>
    <router-view @loadData="loadData" :tabShow="tabShow"></router-view>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Provide,Prop,Watch } from "vue-property-decorator";
import articleApi from "@/api/article";

@Component({
  components: {}
})
export default class goodsList extends Vue {
  @Provide() page: number = 1; // 当前page
  @Provide() size: number = 10; // 请求数据的个数 默认5
  @Provide() total: number = 0; // 总数据条数
  @Provide() tabShow: Boolean = true; // 是显示否列表页面
  @Provide() loading: Boolean = true; // 是否显示加载图标
  @Provide() tHeight: number = document.body.offsetHeight - 323;
  tableData:any = []
  @Provide() Height:any=''
  @Prop({}) tabVisible!: any;
  searchMaps:any={

  }
  @Watch("$route") handleRouteChange(to: any,form:any) {
    if(form.path!='/articleList'){
      this.tabShow=this.tabVisible;
    }
  }
  @Watch("Height")
  changeHeight(){
    (this.$refs.tableBox as HTMLDivElement).style.height=this.Height + 10+ 'px'
  }
  created() {

    if(this.$route.path!='/articleList'){
      this.tabShow=false
    }
    this.loadData();
  }

  loadData() {
    articleApi.articleLists(this.page,this.size,this.searchMaps)
    .then(res=>{
      console.log(res.data.data.data)
      this.tableData = res.data.data.data
      this.loading = false
    })
  }

  handleSizeChange(val: number): void {
    this.size = val;
    this.page = 1;
    this.loadData();
  }

  handleCurrentChange(val: number): void {
    this.page = val;
    this.loadData();
  }

  handleSearch(): void {
    // 点击搜索
    this.page= 1;
    this.loadData();
  }
  //删除
  DeleteOperation(id) {
    let data = {
      id,
      status:99
    }
    this.$confirm('确定要删除该文章？', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      closeOnClickModal:false
    }).then(() => {
      articleApi.articleChange(data)
      .then(res=>{
        console.log(res.data)
        if(res.data.data) {
          this.$message({
            message: '操作成功',
            type: "success"
          });
          this.loadData()
        }else {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
        }
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消删除'
      });          
    });
    
  }
  //状态修改
  StatusModification(id,status) {
    let data = {
      id,
      status
    }
    articleApi.articleChange(data)
    .then(res=>{
      console.log(res.data)
      if(res.data.data) {
        this.$message({
          message: '操作成功',
          type: "success"
        });
        this.loadData()
      }else {
        this.$message({
          message: res.data.msg,
          type: "success"
        });
      }
    })
  }
  handleDetail(){
    this.tabShow=false
  }
  // 新增
  handleAdd(){
    this.tabShow=false
    this.$router.push({
      path:'articleDetails'
    })
  }
}
</script>

<style lang="scss" >
.el-date-editor{
  margin-right: 10px;
}
.el-button--small, .el-button--small.is-round {
  margin-right: 10px;
}
.add {
  margin-top: 8px;
 
}
.el-button--mini, .el-button--mini.is-round {
  margin: 5px;
}
.viewdetails {
  cursor: pointer;
  margin: 5px;
}
.viewdetails:hover {
  color: #409EFF;
}
.details-box {
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.4);
  z-index: 22;
  width: 100%;
  height: 100%;
  .details {
    width: 1200px;
    height: 800px;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -600px;
    margin-top: -400px;
    padding: 10px 30px;
    .details-tilte {
      padding: 10px 0;
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .details-box1 {
      height: 700px;
    }
    .but-box {
      text-align: center;
      margin-top: 10px;
    }
  }
}
.commodity-name{
      display:flex;
      flex-wrap: nowrap;
      padding: 6px;
      .commodity-image{
        width: 50px;
        height:50px;
      }
      p{
        margin:auto 10px;
      }
    }
.el-table .cell {
  text-align: center !important;
}
.img {
  width: 100px;
  height: 100px;
}
</style>